import { memo, useState } from "react";
import classNames from "classnames";
import { TabsWrapper } from "./style";
import ScrollView from "@/components/scroll-view";

const SectionTabs = memo((props) => {
  const { tabs = [], selectTab } = props;
  const [currentIndex, setCurrentIndex] = useState(0);

  const handleSelectTab = (index, name) => {
    setCurrentIndex(index);
    selectTab(name);
  };

  return (
    <TabsWrapper>
      <ScrollView>
        {tabs.map((item, index) => {
          return (
            <div className={classNames("item", { active: index === currentIndex })} key={item} onClick={() => handleSelectTab(index, item)}>
              {item}
            </div>
          );
        })}
      </ScrollView>
    </TabsWrapper>
  );
});

export default SectionTabs;
